// canvas-components/line/index.js

import * as echarts from '../../ec-canvas/echarts.min.js';


function setOption(option) {
    return option = {
        // title: {
        //     text: '测试下面legend的红色区域不应被裁剪',
        //     left: 'center'
        // },
        color: option.color,
        // ['#6794de', '#62c7c9'],
        legend: option.legend,
        // {
        //     data: ['个人', '商户'],
        //     bottom: 15,
        //     left: 'center',
        //     // backgroundColor: 'red',
        //     z: 100
        // },
        grid: {
            left: '5%',
            top: 20,
            right: '5%',
            bottom: 45,
            containLabel: true
        },
        tooltip: {
            show: true,
            trigger: 'axis'
        },
        xAxis: option.xAxis,
        // {
        //     type: 'category',
        //     boundaryGap: true,
        //     data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
        //     // show: false
        // },
        yAxis: {
            x: 'center',
            type: 'value',
            splitLine: {
                lineStyle: {
                    type: 'solid',
                    color: ['#d4d4d3']
                }
            }
            // show: false
        },
        series: option.series,
        // [
        //     {
        //         name: '个人',
        //         type: 'line',
        //         label: {
        //             show: true,
        //             position: 'top',
        //             distance: 0,
        //             formatter: '{c}',
        //             textStyle: {
        //                 color: '#6794de',
        //                 fontSize: 12
        //             }
        //         },
        //         // smooth: true,
        //         data: [18, 36, 65, 30, 78, 40, 33]
        //     }, {
        //         name: '商户',
        //         type: 'line',
        //         label: {
        //             show: true,
        //             position: 'top',
        //             distance: 0,
        //             formatter: '{c}',
        //             textStyle: {
        //                 color: '#62c7c9',
        //                 fontSize: 12
        //             }
        //         },
        //         // smooth: true,
        //         data: [12, 50, 51, 35, 70, 30, 20]
        //     }
        // ]
    };
    
}
Component({

    /**
     * 组件的属性列表
     */
    properties: {
        id: {
            type: String,
            value: "chart-dom-line"
        },
        canvasId: {
            type: String,
            value: "chart-line"
        },
        width: {
            type: String,
            value: "750rpx"
        },
        height: {
            type: String,
            value: "500rpx"
        },
        option: {
            type: Object,
            value() {
                return {}
            }
        },
    },

    /**
     * 组件的初始数据
     */
    data: {
        ec: {
            lazyLoad: true,
        },

    },

    observers: {
        'option': function (value) {
            if(value){
                // this.oneComponent = this.selectComponent('#'+this.data.id);
                console.log(this.oneComponent)
                this.initChart()
            }
        },
    },

    lifetimes: {
        // // 生命周期函数，可以为函数，或一个在methods段中定义的方法名
        // attached: function () {

        // },
        ready: function () {
            this.oneComponent = this.selectComponent('#'+this.data.id); 
            console.log(this.oneComponent)
            console.log("LINE!!!!!!!")
            // this.initChart()
        },
        // moved: function () {
        //     //console.log("moved")
        // },
        detached: function () {
            //console.log("detached")
            // this.setData({
            //     ec: {
            //         onInit: null
            //     }
            // })
        },
    },

    /**
     * 组件的方法列表
     */
    methods: {
        initChart() {
            if(this.oneComponent){
                this.oneComponent.init((canvas, width, height) => {
                    const chart = echarts.init(canvas, null, {
                        width: width,
                        height: height
                    });
                    console.log(this.data.option)
                    // setOption(chart, this.data.option)
                    // echarts转图片
                    // chart.on('finished', () => {
                    //     this.oneComponent.canvasToTempFilePath({
                    //         success: res => {
                    //             console.log(res)
                    //             this.setData({
                    //                 echartImgSrc: res.tempFilePath
                    //             })
                    //         },
                    //         fail: res => console.log('转换图片失败', res)
                    //     })
                    // })
                    chart.setOption(setOption(this.data.option), true);
                    return chart;
                });
            }else{
                this.oneComponent = this.selectComponent('#'+this.data.id);
                this.initChart()
            }
        }
    }
})